<!--
 * @Description: 
 * @Date: 2020-12-16 15:09:48
 * @LastEditors: lother
 * @LastEditTime: 2021-02-02 15:34:31
 * @FilePath: \VicoAccountOpening-H5\src\views\autograph\autoImg.vue
-->
<template>
<div>
        <div v-horizontal-screen style="z-index: 10;position: relative;">
            <l-header :sliderShow="false"></l-header>
        </div>
        <div class="scree" >
            <signature ref="signature"></signature>
        </div>
        <div class="btn">
            <div @click="clear">
                {{$t('autograph.autoImg.5636mh7bceo0')}}
            </div>
            <div class="primary" @click="save">
                {{$t('autograph.autoImg.5636mh7bdfo0')}}
            </div>
        </div>
</div>
</template>
<script>
import signature from 'vue-signature'
import { uploads } from '@/api/common'
export default {
    components:{
        signature
    },
    data () {
        return {
            pageShow:true
        }
    },
    mounted(){
        // var vConsole = new VConsole();
      window.addEventListener("resize", this.renderResize, false)
    },
    methods: {
        save(){
			var _this = this;
            var png = _this.$refs.signature.save()
            _this.resetOrientation(png,8,function(resd){
                var  pngImg = _this.base64ToFileObject(resd)
                var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
            　　formData.append('file',pngImg); //接口需要传的参数
                uploads(formData)
                .then(res=>{
                    if(res.code==1){
                        _this.$router.replace('autograph')
                        _this.$toast(_this.$t('autograph.autoImg.5636mh7bdq00'))
                        localStorage.setItem('img',res.data.url)
                    }else{
                        _this.$toast(res.msg)
                    }
                })
            })
			// var jpeg = _this.$refs.signature.save('image/jpeg')
			// var svg = _this.$refs.signature.save('image/svg+xml');
		},
		clear(){
			var _this = this;
			_this.$refs.signature.clear();
		},
        renderResize() {
        // 判断横竖屏
            let width = document.documentElement.clientWidth
            let height = document.documentElement.clientHeight
            if(width>height) {
                this.pageShow=false
            }else{
                this.pageShow=true
            }
            // 做页面适配
            // 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
        },
        base64ToFileObject(base64) {
            base64 = base64.split(',')[1];
            base64 = window.atob(base64);
            var ia = new Uint8Array(base64.length);
            for (var i = 0; i < base64.length; i++) {
                ia[i] = base64.charCodeAt(i);
            };
            var blob = new Blob([ia], { type: "image/png" });
            var newFile = new File([blob], "abc.png");
            return newFile;
        },
        resetOrientation(srcBase64, srcOrientation, callback) {
            var img = new Image();
            img.onload = function() {
                var width = img.width,
                    height = img.height,
                    canvas = document.createElement('canvas'),
                    ctx = canvas.getContext("2d");
                // set proper canvas dimensions before transform & export
                if ([5,6,7,8].indexOf(srcOrientation) > -1) {
                    canvas.width = height;
                    canvas.height = width;
                } else {
                    canvas.width = width;
                    canvas.height = height;
                }
                // transform context before drawing image
                switch (srcOrientation) {
                    case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
                    case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
                    case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
                    case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
                    case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
                    case 7: ctx.transform(0, -1, -1, 0, height , width); break;
                    case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
                    default: ctx.transform(1, 0, 0, 1, 0, 0);
                }
                // draw image
                ctx.drawImage(img, 0, 0);
                // export base64
                callback(canvas.toDataURL('image/jpeg'));
            };
            img.src = srcBase64;
        },
       
    },
    directives: {
        'horizontal-screen': {
            bind(el, binding, vnode){
                let self = vnode.context;
                function reset(init){
                    
                    let width = document.documentElement.clientWidth,
                        height = document.documentElement.clientHeight;
                    //在竖屏状态我们通过添加transform:rotate(90deg)，来让这个页面横过来
                    if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
                        el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
                        el.style.width = `${height}px`;
                        el.style.height = `${width}px`;
                        el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
                        //如果已经处于横屏状态就不做其他处理了
                    }else if(window.orientation === 90 || window.orientation === -90){//横屏状态
                        el.style.webkitTransform = el.style.transform = `rotate(0)`;
                        el.style.width = `${width}px`;
                        el.style.height = `${height}px`;
                    }
                }
                reset(true);

                let timer = null;
                el.fn = function(e) {
                    clearTimeout(timer);
                    timer = setTimeout(reset, 300);
                }
                
                window.addEventListener('resize', el.fn, false);

                if("onorientationchange" in window){
                    window.addEventListener('orientationchange', el.fn, false);
                }
            },
            unbind(el, binding, vnode){
                window.removeEventListener('resize', el.fn, false);
                window.removeEventListener('orientationchange', el.fn, false);
            }
        },
        'scree':{
            bind(el,binding,vnode){
                let width = document.documentElement.clientWidth - 46,
                height = document.documentElement.clientHeight;
                el.style.width = `${height}px`;
                el.style.height = `${width}px`;
            }
        }
    }
  
}
</script>
<style lang="less">
    .scree{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 11;
        transform: translate( calc( -47%  ) ,-50%);
        height: calc( 100%  -  0.8rem );
        width: calc( 100% - 46px - 2rem );
        border: 1px solid @sliderColor;
        border-radius: 3px;
        overflow: hidden;
    }
    .btn  {
        position: absolute;
        bottom: 17%;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        left: -17%;
        z-index: 12;
        .center;
        div{
            width: 2rem;
            height: 0.6rem;
            line-height: 0.6rem;
            background: @sliderColor;
            font-size: 0.3rem;
            color: @sizeColor;
            text-align: center;
            border-radius: 3px;
        }
        div.primary{
            background: @btnColor;
            color: @fff;
            margin-left: 0.2rem;
        }
    }
    .rotate{
        transform:rotate(90deg);
    -ms-transform:rotate(90deg); 	/* IE 9 */
    -moz-transform:rotate(90deg); 	/* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg); 	/* Opera */
    }

</style>